
  <template>
  <div>
    <!-- <div style="padding: 0 16px ;">
      <h3>在线用户</h3>
      <p>该页面代码已经自动生成，按照普通码 表增删改查 为基础生成模板</p>
      <p>生成代码对应的 vue 文件路径：system/sysmanager/onlineuser/search/search.vue</p>
      <el-alert title="注意：表格内数据为模拟数据, 如果数据格式不对，请先进行格式转换。 模拟数据文件路径：src/mock/demo.js" type="warning"> </el-alert>
    </div> -->

    <div class="clearfix bf-top-button">
      <div class="float-l">
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input
            placeholder="请输入用户名称搜索"
            prefix-icon="el-icon-search"
            v-model="searchData"
            @keyup.enter.native="quickSearch"
          ></el-input>
        </div>
        <div class="float-l padding-l">
          <!-- <el-button @click="showSearch">高级筛选</el-button> -->
        </div>
      </div>
    </div>

    <bf-table
      :data="userData"
      :setting="setting"
      :rowAction="rowAction"
      @editSubmit="editSubmit"
      @pageChange = "pageChange"
      :editRules = "editRules"
      ref="table"
    ></bf-table>
  </div>
</template>

<script>

import { getOnlineApi } from './onlie.api'
export default {
  data() {
    return {
      searchData: '',
      userData: {},
      rowAction: [
        {
          label: '查看',
          click: (item) => {
            this.$refs.table.showDetail(item)
          }
        }
      ],
      setting: [
        {
          field: 'sessionId',
          title: '会话id',
          type: 'text',
          isHiden: true
        },
        {
          field: 'userId',
          title: '用户名称',
          type: 'text',
          searchable: true
        },
        {
          field: 'userName',
          title: '姓名',
          type: 'text',
          searchable: true
        },
        {
          field: 'orgId',
          title: '机构号',
          type: 'org'
        },
        {
          field: 'serverIp',
          title: '服务器ip',
          type: 'text'
        },
        {
          field: 'clientIp',
          title: '客户端ip',
          type: 'text'
        },
        {
          field: 'browser',
          title: '浏览器',
          type: 'text'
        },
        {
          field: 'os',
          title: '操作系统',
          type: 'text'
        },
        {
          field: 'loginDate',
          title: '登录日期',
          type: 'text'
        },
        {
          field: 'loginTime',
          title: '登录时间',
          type: 'text'
        }
      ],
      editRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入用户角色', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
    // this.searchList({})
    const params = {
      page: 1
    }
    this.getOnlineUser(params)
  },
  methods: {
    getOnlineUser(params) {
      getOnlineApi(params).then(response => {
        this.userData = response
      })
    },
    editSubmit(params, formType, formList) {
      if (formType === 'search') {
        params.page = 1
        this.getOnlineUser(params)
      }
      // console.log(params, formType, formList)
    },
    pageChange(pageObj) {
      this.getOnlineUser(pageObj)
    },
    showSearch() {
      this.$refs.table.showSearch()
    },
    showAdd() {
      this.$refs.table.showAdd()
    },
    quickSearch() {
      const params = {
        page: 1,
        userName: this.searchData
      }
      this.getOnlineUser(params)
    }
  }
}
</script>

<style scoped>

</style>
